<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./canvas.js"></script>
  </head>
  <body>
    <div id="text"></div>
    <canvas id="myDraw" width="400" height="600"></canvas>
    <canvas id="tutorial" width="300" height="300"></canvas>
    <script>
      draw();
      async function draw() {
        //实例化CanvasDraw对象
        let canvasDraw = new CanvasDraw("myDraw");
        // 加载字体
        await canvasDraw.loadFace("./小篆拼音体.ttf", "MyCustomFont");
        // 绘制矩形
        canvasDraw.drawRect("#cccccc", 0, 0, 50, 50);
        // 绘制矩形框
        canvasDraw.drawRectBorder("#cccccc", 60, 0, 50, 50);

        // 绘制文字
        canvasDraw.drewText(
          "两个可选的属性",
          24,
          "#000000",
          50,
          50,
          "MyCustomFont"
        );
        // 清空区域
        canvasDraw.clearRect(10, 10, 20, 20);
        // 绘制图片
        canvasDraw.drewImage("./640.webp", 100, 100, 200, 400, 30);
        // 绘制椭圆
        canvasDraw.drawEllipseBorder("#cccccc", 50, 100, 20, 30, 30);
        // 下载canvas
        //   canvasDraw.downloadCanvas()
      }

      init();

      function init() {
        let canvas = document.querySelector("#tutorial");
        let ctx = canvas.getContext("2d");
        step();
        function step() {
          drawDial(ctx); //绘制表盘
          drawAllHands(ctx); //绘制时分秒针
          requestAnimationFrame(step);
        }
      }

      /*绘制时分秒针*/
      function drawAllHands(ctx) {
        let time = new Date();

        let s = time.getSeconds();
        let m = time.getMinutes();
        let h = time.getHours();

        let pi = Math.PI;
        let secondAngle = (pi / 180) * 6 * s; //计算出来s针的弧度
        let minuteAngle = (pi / 180) * 6 * m + secondAngle / 60; //计算出来分针的弧度
        let hourAngle = (pi / 180) * 30 * h + minuteAngle / 12; //计算出来时针的弧度

        drawHand(hourAngle, 60, 6, "red", ctx); //绘制时针
        drawHand(minuteAngle, 106, 4, "green", ctx); //绘制分针
        drawHand(secondAngle, 129, 2, "blue", ctx); //绘制秒针
      }
      /*绘制时针、或分针、或秒针
       * 参数1：要绘制的针的角度
       * 参数2：要绘制的针的长度
       * 参数3：要绘制的针的宽度
       * 参数4：要绘制的针的颜色
       * 参数4：ctx
       * */
      function drawHand(angle, len, width, color, ctx) {
        ctx.save();
        ctx.translate(150, 150); //把坐标轴的远点平移到原来的中心
        ctx.rotate(-Math.PI / 2 + angle); //旋转坐标轴。 x轴就是针的角度
        ctx.beginPath();
        ctx.moveTo(-4, 0);
        ctx.lineTo(len, 0); // 沿着x轴绘制针
        ctx.lineWidth = width;
        ctx.strokeStyle = color;
        ctx.lineCap = "round";
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
      }

      /*绘制表盘*/
      function drawDial(ctx) {
        let pi = Math.PI;

        ctx.clearRect(0, 0, 300, 300); //清除所有内容
        ctx.save();

        ctx.translate(150, 150); //一定坐标原点到原来的中心
        ctx.beginPath();
        ctx.arc(0, 0, 148, 0, 2 * pi); //绘制圆周
        ctx.stroke();
        ctx.closePath();

        for (let i = 0; i < 60; i++) {
          //绘制刻度。
          ctx.save();
          ctx.rotate(-pi / 2 + (i * pi) / 30); //旋转坐标轴。坐标轴x的正方形从 向上开始算起
          ctx.beginPath();
          ctx.moveTo(110, 0);
          ctx.lineTo(140, 0);
          ctx.lineWidth = i % 5 ? 2 : 4;
          ctx.strokeStyle = i % 5 ? "blue" : "red";
          ctx.stroke();
          ctx.closePath();
          ctx.restore();
        }
        ctx.restore();
      }
    </script>
  </body>
</html>
